<template>
    <div>
        <div class="ps">
            1. 此功能是用在文件列表区域中，可以对文件进行扩展操作，例如：下载、在线打开、删除等<br />
            2. 文件根据类型展示不同的图标；鼠标悬浮出现按钮区域；初步有下载、删除这两个功能
        </div>
        <div style="display: flex;">
            <div v-for="fileItem in fileList" :key="fileItem.key">
                <div class="upload-file-item">
                    <img :src="fileIconType(fileItem.type)">
                    <div class="file-overlay">
                        <div class="file-overlay-buttons">
                            <button class="file-function-button" @click="fileOpenOnline(fileItem)">在线打开</button>
                            <button class="file-function-button" @click="fileDownload(fileItem)">下载</button>
                            <button class="file-function-button" @click="fileRemove(fileItem)">删除</button>
                        </div>
                    </div>
                    <div class="upload-file-name">
                        {{ fileItem.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            typeIconRules: [//文件图标的类型
                { iconUrl: require('@/assets/img/unknown.png'), typeArray: [] },//默认类型
                { iconUrl: require('@/assets/img/Excel.png'), typeArray: ['.XLSX', '.XLS'] },
                { iconUrl: require('@/assets/img/Word.png'), typeArray: ['.DOC', '.DOCS'] },
                { iconUrl: require('@/assets/img/PDF.png'), typeArray: ['.PDF'] },
                { iconUrl: require('@/assets/img/txt.png'), typeArray: ['.TXT'] },
                { iconUrl: require('@/assets/img/PPT.png'), typeArray: ['.PPT'] },
                { iconUrl: require('@/assets/img/img.png'), typeArray: ['.JPG', '.JPEG', '.PNG', '.GIF', '.BMP'] },
            ],
            fileList: [//文件列表
                { type: '.xlsx', name: 'Excel', url: '1' },
                { type: '.doc', name: '文档', url: '2' },
                { type: '.pdf', name: 'PDF', url: '3' },
                { type: '.txt', name: '文本', url: '4' },
                { type: '.ppt', name: 'ppt', url: '5' },
                { type: '.jpg', name: '图片', url: '6' },
                { type: '.mov', name: '其他格式', url: '7' }

            ]
        }
    },
    methods: {
        //根据文件的后缀，选择展示不同的图片
        fileIconType(type) {
            if (type == null || type == '') {
                return
            }
            type = type.toUpperCase();
            const matchingRule = this.typeIconRules.find(item => item.typeArray.includes(type));
            //未知文件类型，使用第一个问号图标
            return matchingRule == undefined ? this.typeIconRules[0].iconUrl : matchingRule.iconUrl
        },
        fileRemove(data) {
            console.log("删除文件：", data)
        },
        fileOpenOnline(data) {
            console.log("在线打开文件：", data)
        },
        fileDownload(data) {
            console.log("下载文件：", data)
        }
    }
}
</script>
<style lang="scss" scoped>
.ps {
    color: gray;
    padding-bottom: 10px;
}

.upload-file-item {
    position: relative;
    display: inline-block;
    padding: 0 10px;

    .upload-file-name {
        text-align: center;
    }

    .file-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 15px;

        .file-overlay-buttons {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .file-function-button {
            display: inline-block;
            background-color: #fff;
            border: none;
            width: 60px;
            height: 30px;
            margin: 5px;
            padding: 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 14px;
            color: #333;
            border-radius: 5px;
        }
    }
}

.upload-file-item:hover .file-overlay {
    opacity: 1;
}

.file-function-button:hover {
    background-color: #696969 !important;
    color: white !important;
}
</style>